/*
* @Author: Yangrui
* @Date: 2023-05-30 15:57:02
* @LastEditors: Yejing
* @LastEditTime: 2023-06-08 15:39:55
* @Description: desc
*/
<template>
	<view class="media-view" :style="paddingStyle">
		<view class="header">
			<c-status-bar :isFixed="false" />
			<view class="header-content">
				<view class="livs-img">
					<imageForSize @click="goLivesList" size="50" :src="require('@/static/images/video/lives-icon.png')">
					</imageForSize>
				</view>
				<view class="cover-tabs-box">
					<view :class="`cover-tabs ${headerCurrent=== index ? 'is-active' :''}`"
						v-for="(item,index) in tabList" :key="index" @click="headerChange(index)">
						<text>{{item.name}}</text>
					</view>
				</view>
				<!-- u-tabs :list="tabList" :is-scroll="true" :current="current" @change="change" :show-bar="false"
					active-color="white" inactive-color="rgba(255,255,255,0.5)"></u-tabs> -->
				<image @click="goSearch" src="@/static/images/video/fangda.png"></image>
			</view>

		</view>
		<swiper :disable-touch="false" :indicator-dots="false" :autoplay="false" :current="headerCurrent"
			:interval="3000" :duration="1000">
			<swiper-item @touchmove.stop>
				<swiper :acceleration="false" v-if="videoList2.length != 0" :vertical="true"
					@change="changeCurrentVideo($event,'attention')" interval="1000">
					<swiper-item v-for="(item, index) in videoList2" :key="item.id+''+index">
						<c-video :vKey='`attention${index}`' ref="cVideo2" @openSharePop="openSharePop"
							:videoCurrent="currentVideoKey" :video="item" watch></c-video>
					</swiper-item>
				</swiper>
			</swiper-item>
			<swiper-item @touchmove.stop>
				<swiper :acceleration="false" v-if="videoList.length != 0" :vertical="true"
					@change="changeCurrentVideo($event,'recommend')" interval="1000">
					<swiper-item v-for="(item, index) in videoList" :key="item.id+''+index">
						<c-video :vKey='`recommend${index}`' ref="cVideo" @openSharePop="openSharePop"
							:videoCurrent="currentVideoKey" :video="item" watch></c-video>
					</swiper-item>
				</swiper>
			</swiper-item>
		</swiper>


		<!-- <view v-if="videoList.length && videoList2.length" class="none-video">
			<u-icon name="play-circle" color="rgba(255,255,255,0.5)" size="128"></u-icon>
			<text class="no-video">No video</text>
		</view> -->
		<c-share v-model="shareShow" :data="{url:'/pages/public/recordVideo/recordVideo'+'?videoId='+videoCurrent}"
			:sendUserData="{data:currentVideoInfo,type:'video'}"></c-share>
		<!-- 会员充值 -->
		<!-- <memberAdvertising :popData='popData' :popShop='popShop' v-if="popShop" @fnPopShop='fnPopShop'>
        </memberAdvertising>
		<!-- <c-tabbar></c-tabbar> -->
	</view>
</template>
<script>
	import cVideo from './components/c-video.vue'
	let first = true
	export default {
		components: {
			cVideo
		},
		onHide() {
			first = true
			console.log('hide页面隐藏', first);
		},
		onShow() {
			setTimeout(() => {
				first = false
			}, 100)
		},
		beforeRouteEnter() {
			console.log(arguments, '路由进入');
		},
		onTabItemTap(item) {
			if (!first && item.index == 2) {
				uni.navigateTo({
					url: "/pages/media/uploadMedia"
				})
			} else {
				first = false
			}
		},
		data() {
			return {
				// 任务标题
				title: "",
				// 任务info
				info: "",
				// 广告弹窗
				memberAdvertisingShow: false,
				setInterval: null,
				popData: {},
				popShop: false,
				videoCurrent: '', // 当前滑动视频id
				// 顶部列表
				tabList: [{
						name: this.$t("media.follow"),
						id: 2,
						path: "/pages/Followed/index"
					},
					{
						name: this.$t("media.recommend"),
						id: 3,
						path: "/pages/Recommend/index"
					},
				],
				// 当前列表显示索引
				headerCurrent: 1,
				videoCurrentIndex: { // 记录视频刷到的位置
					recommend: 0,
					attention: 0
				},
				videoList: [], // 推荐视频
				videoList2: [], // 关注的视频
				initState: { // 初始化状态 
					videoList: false,
					videoList2: false,
				},
				// 
				shareShow: false,
				// 当前视频模式 如果没有记录就是随机加载 历史记录存于vuex
				recordStatus: false,
				// 短视频记录
				recordList: [],
				recordNo: 0,
				recordCurrent: 0,
				shareData: {}, // 
			};
		},
		onLoad(data) {
			this.videoInit()
		},
		computed: {
			paddingStyle() {
				let style = {}
				// style = {
				// 	'padding-bottom': '150rpx' || this.$store.getters.homePageWindowInfo.tabbarHeight
				// }
				style = {
					'height': 'calc(100vh - 132rpx)'
				}
				// // #ifdef APP-PLUS
				// style = {
				// 	'height': 'calc(100vh - 150rpx)'
				// }
				// // #endif
				return style
			},
			// 计算当前播放视频的唯一key 通过下标 id 加前缀
			currentVideoKey() {
				let key = ''
				// 1 ---  推荐视频
				if (this.headerCurrent) {
					key = `recommend${this.videoCurrentIndex.recommend}_videoObj_${this.videoCurrent}`
				} else {
					// 0 --- 关注视频
					key = `attention${this.videoCurrentIndex.attention}_videoObj_${this.videoCurrent}`
				}
				return key
			},
			currentVideoInfo() {
				let info = null
				if (this.headerCurrent) {
					info = this.videoList[this.videoCurrentIndex.recommend]
				} else {
					info = this.videoList2[this.videoCurrentIndex.attention]
				}
				return info || {}
			},
		},
		methods: {
			// 请求接口获取视频
			getNewVedioAjax(cb) {
				return new Promise((r1, r2) => {
					this.$u.get("/app/short/video").then(res => {
						if (res.data) {
							this.videoList.push(res.data)
							cb && cb()
							r1(res.data)
						}
					})
				})
			},
			// 请求接口获取视频 - 获取关注的用户的视频
			getNewVedioFollowAjax(cb) {
				return new Promise((r1, r2) => {
					this.$u.put("/app/short/video/getFollowUserShortVideo").then(res => {
						if (res.data) {
							this.videoList2.push(res.data)
							cb && cb()
							r1(res.data)
						}
					})
				})
			},

			// 滑动事件暂停其他所有视频，播放当前视频
			changeCurrentVideo(e, key) {
				// 滑动加载更多视频
				if (key === 'recommend') {
					this.getNewVedioAjax(() => {
						this.videoCurrent = this.videoList[e.detail.current].id
						this.videoCurrentIndex[key] = e.detail.current
					})
				} else {
					this.getNewVedioFollowAjax(() => {
						this.videoCurrent = this.videoList2[e.detail.current].id
						this.videoCurrentIndex[key] = e.detail.current
					})
				}

			},

			// 搜索事件
			search: () => {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			// 切换视频状态
			headerChange(index) {
				let statusKey = ''
				switch (index) {
					case 0:
						statusKey = 'videoList2'
						break;
					case 1:
						statusKey = 'videoList'
						break;
					default:
						break;
				}
				this.headerCurrent = index;
				(!this.initState[statusKey]) && this.videoInit()
			},
			openSharePop() {
				this.shareShow = !this.shareShow
			},
			goSearch() {
				this.$u.route('pages/searchInfo/videoSearch')
			},
			// 短视频初始化
			videoInit(video = this.headerCurrent) {
				if (video) {
					// 初始化推荐的视频
					Promise.all([this.getNewVedioAjax(), this.getNewVedioAjax()]).then(res => {
						// this.$refs.cVideo[0].flag = '1'
						this.initState.videoList = true
						this.$nextTick(() => {
							this.videoCurrent = res[0].id
							const refs = this.$refs.cVideo[0]
							refs.flag = '1'
							refs.changeVideoStatus(
								`attention0_videoObj_${this.videoList[this.recordCurrent].id}`)
						})
					})

				} else {
					// 初始化关注的视频
					Promise.all([this.getNewVedioFollowAjax(), this.getNewVedioFollowAjax()]).then(res => {
						// this.$refs.cVideo[0].flag = '1'
						this.initState.videoList2 = true
						this.$nextTick(() => {
							this.videoCurrent = res[0].id
							const refs = this.$refs.cVideo2[0]
							refs.flag = '1'
							refs.changeVideoStatus(
								`recommend0_videoObj_${this.videoList[this.recordCurrent].id}`)
						})
					})
				}
			},
			// 跳转到直播列表
			goLivesList() {
				this.$u.route('/pages/media/livesList')
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: black;
		overflow: hidden;
	}

	.media-view {
		background: black;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
	}

	swiper {
		height: 100%;
	}

	.swiper-item {
		height: 100%;

		video {
			height: 100%;
			width: 100%;
		}

		.user {
			position: fixed;
			left: 30rpx;
			color: white;
			bottom: 100rpx;
			display: flex;
			flex-direction: column;
			width: 50%;
		}

		// .Task_rewards {
		// 	position: fixed;
		// 	right: 30rpx;
		// 	color: white;
		// 	bottom: 50rpx;
		// 	display: flex;
		// 	width: 50%;
		// 	flex-direction: column;
		// 	align-items: flex-end;

		// 	.coin {
		// 		background: url('@/static/image/offlineVideo/coin.png');
		// 		width: 150rpx;
		// 		height: 150rpx;
		// 		background-position: center;
		// 		background-size: contain;
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: space-evenly;

		// 		view {
		// 			display: flex;
		// 			flex-direction: column;
		// 			align-items: center;
		// 			justify-items: center;
		// 		}
		// 	}
		// }
	}

	.header {
		position: fixed;
		top: 30rpx;
		left: 0;
		font-size: 24rpx;
		z-index: 100;
		width: 100vw;

		.header-content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-right: 32rpx;
			padding-left: 44rpx;

			image {
				width: 45rpx;
				height: 45rpx;
			}

			.cover-tabs-box {
				flex: auto;
				display: flex;
				align-items: flex-end;
				justify-content: center;

				.cover-tabs {
					// flex: 1;
					display: flex;
					justify-content: center;
					font-size: 32rpx;
					color: #fff;
					opacity: 0.5;

					&+.cover-tabs {
						margin-left: 20rpx;
						padding-left: 4rpx;
					}

					&.is-active {
						padding-left: 0;
						font-size: 40rpx;
						opacity: 1;
					}
				}
			}
		}

		/deep/ .u-tabs {
			background: unset !important;
		}
	}


	.zhuanfaPopup {

		.zhuanfaScrollView {
			padding: 60rpx 50rpx;

			/deep/ .uni-scroll-view-content {
				display: flex;
			}

			.zhuanfaItem {
				width: 150rpx;
				height: 150rpx;
				margin-right: 50rpx;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
					border-radius: 25rpx;
				}
			}
		}

		.friendScrollView {
			height: 800rpx;


			.friend {
				display: flex;
				align-items: center;
				padding: 30rpx 46rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-right: 30rpx;
					border-radius: 50%;
				}

				.content {
					flex: 1;
					margin-right: 30rpx;

					.name {
						font-size: 34rpx;
						font-family: SFUIDisplay-Regular, SFUIDisplay;
						font-weight: 400;
						color: #0A1F44;
					}

					.info {
						font-size: 30rpx;
						font-family: SFUIDisplay-Regular, SFUIDisplay;
						font-weight: 400;
						color: #999CAD;
					}

					display: flex;
					flex-direction: column;
				}

				.btn {
					border: 2rpx solid #2934D0;
					border-radius: 12rpx;
					font-size: 28rpx;
					font-family: SFUIDisplay-Regular, SFUIDisplay;
					font-weight: 400;
					color: #2934D0;
					line-height: 40rpx;
				}
			}
		}
	}

	.none-video {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.no-video {
			color: rgba(255, 255, 255, 0.5);
			font-size: 48rpx;
		}
	}
</style>